<template>
  <div class="contentView" v-loading="formLoading" :style="`height:${contentHeight}px`">
    <div class="routeHeader">
      <el-button
        class="mr-5px"
        @click="submitForm(1)"
        type="primary"
        :disabled="formLoading"
        v-hasPermi="['produce:present-condition:save']"
        v-show="formType == 'edit' && formData.dictPresentStatus == 10"
        >保 存</el-button
      >
      <el-button
        class="mr-5px"
        @click="submitForm(2)"
        type="primary"
        :disabled="formLoading"
        v-hasPermi="['produce:present-condition:submit']"
        v-show="formType == 'edit' && formData.dictPresentStatus == 10"
        >提 交</el-button
      >
      <el-button @click="goBack">关 闭</el-button>
    </div>
    <el-scrollbar :style="`height:${contentHeight - 63}px`">
      <div class="orderTitle">
        <img src="@/assets/imgs/hasColorLogo.png" />
        设计变更单
      </div>
      <el-row class="orderView" v-loading="formLoading">
        <el-col :span="24" class="detailTitle">基本信息</el-col>
        <el-col :span="6" class="detailItem">
          <span class="leftLabel">任务单号</span>
          <el-input class="rightIpt" v-model="formData.taskNumber" disabled />
        </el-col>
        <el-col :span="6" class="detailItem">
          <span class="leftLabel">产品编号</span>
          <el-input class="rightIpt" v-model="formData.productNumber" disabled />
        </el-col>
        <el-col :span="6" class="detailItem">
          <span class="leftLabel">产品名称</span>
          <el-input class="rightIpt" v-model="formData.productName" disabled />
        </el-col>
        <el-col :span="6" class="detailItem">
          <span class="leftLabel">部件类型</span>
          <el-input class="rightIpt" v-model="formData.partType" disabled />
        </el-col>
        <el-col :span="6" class="detailItem" style="border-left: none">
          <span class="leftLabel">客户代码</span>
          <el-input class="rightIpt" v-model="formData.customerCode" disabled />
        </el-col>
        <el-col :span="6" class="detailItem">
          <span class="leftLabel">变更原因</span>
          <el-select v-model="formData.dictAlertReason" placeholder="" class="rightIpt" disabled>
            <el-option
              v-for="dict in getIntDictOptions('dict_alert_reason')"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-col>
        <el-col :span="6" class="detailItem">
          <span class="leftLabel">变更图纸数</span>
          <el-input class="rightIpt" v-model="formData.alertDrawingQuantity" disabled />
        </el-col>
        <el-col :span="6" class="detailItem">
          <span class="leftLabel">现状调查</span>
          <el-select
            v-model="formData.dictActualitySurvey"
            placeholder=""
            class="rightIpt"
            disabled
          >
            <el-option
              v-for="dict in getIntDictOptions('dict_actuality_survey')"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-col>
        <el-col
          :span="24"
          class="detailTitle"
          style="display: flex; justify-content: space-between; align-items: center"
        >
          <span>变更项明细</span>
          <el-button class="mr-5px" @click="addCol" type="primary" size="small" disabled
            >新增行</el-button
          >
        </el-col>
        <el-table
          ref="singleTableRef"
          :data="formData.childList"
          style="width: 100%"
          border
          class="tableView"
        >
          <el-table-column
            v-for="item in tableTitle"
            :key="item.val"
            :prop="item.val"
            :label="item.label"
            :width="item.width"
            align="left"
          >
            <template #default="scope">
              <!-- 字典 -->
              <dict-tag v-if="item.dictType" :type="item.dictType" :value="scope.row[item.val]" />
              <!-- 非字典 -->
              <template v-else>
                <el-input
                  v-nextInput="'currentState'"
                  name="currentState"
                  v-if="['currentState'].includes(item.val)"
                  v-model="scope.row[item.val]"
                  class="tableIpt"
                  :disabled="formType == 'look'"
                />
                <template v-else>{{ scope.row[item.val] }}</template>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="left" fixed="right">
            <template #default="scope">
              <el-button size="small" link type="danger" @click="delTableCol(scope.$index)" disabled
                >移除行</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-col :span="24" class="detailTitle" style="border-top: 1px solid #000">其他说明</el-col>
        <el-input
          disabled
          resize="none"
          v-model="formData.otherDescription"
          :rows="6"
          type="textarea"
        />
        <el-col :span="24" class="detailTitle">审批结果</el-col>
        <el-input
          disabled
          resize="none"
          v-model="formData.approverOpinion"
          :rows="3"
          type="textarea"
        />
      </el-row>
    </el-scrollbar>
  </div>
</template>
<script setup lang="ts">
   import { getIntDictOptions } from '@/utils/dict'
   import * as PresentConditionApi from '@/api/produce/workOrderManagement/presentCondition'
   import { useTagsViewStore } from '@/store/modules/tagsView'
   const { t } = useI18n() // 国际化
   const message = useMessage() // 消息弹窗

   const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
   const formType = ref('') // 表单的类型：create - 新增；update - 修改
   const formData = ref({})
   const tableTitle = ref([
     {
       label: '图纸图号',
       val: 'drawingNumber',
       width: 160
     },
     {
       label: '部件编码',
       val: 'partCode',
       width: 160
     },
     {
       label: '部件名称',
       val: 'partName',
       width: 160
     },
     {
       label: '规格',
       val: 'specification',
       width: 100
     },
     {
       label: '内做',
       val: 'dictInternalWork',
       width: 60,
       dictType: 'is_machining'
     },
     {
       label: '外协',
       val: 'dictOutsourcing',
       width: 60,
       dictType: 'is_machining'
     },
     {
       label: '外购',
       val: 'dictOutsidePurchase',
       width: 60,
       dictType: 'is_machining'
     },
     {
       label: '数量',
       val: 'quantity',
       width: 60
     },
     {
       label: '目前状态',
       val: 'currentState',
       width: 160
     },{
       label: '填写人',
       val: 'writtenBy',
       width: 150
     },
     {
       label: '图纸变更方案',
       val: 'dictAlertPlan',
       width: 160,
       dictType: 'dict_alert_plan'
     },
     {
       label: '新图纸图号',
       val: 'newDrawingNumber',
       width: 160
     },
     {
       label: '新零部件名称',
       val: 'newPartName',
       width: 160
     },
     {
       label: '数量',
       val: 'newQuantity',
       width: 60
     },
     {
       label: '部件处理方案',
       val: 'dictHandlePlan',
       width: 160,
       dictType: 'dict_handle_plan'
     }
   ])

   /**新增行 */
   const addCol = () => {
     formData.value.childList.push({
       drawingNumber: undefined,
       partCode: undefined,
       partName: undefined,
       specification: undefined,
       dictInternalWork: undefined,
       dictOutsourcing: undefined,
       dictOutsidePurchase: undefined,
       quantity: undefined,
       currentState: undefined,
       dictAlertPlan: undefined,
       newDrawingNumber: undefined,
       newPartName: undefined,
       newQuantity: undefined,
       dictHandlePlan: undefined
     })
   }
   /**移除行 */
   const delTableCol = (index: number) => {
     formData.value.childList.splice(index, 1)
   }
   /** 提交表单 */
   const roleList = ref([undefined,null,''])
   const submitForm = async (type) => {
     const data = formData.value as unknown as PresentConditionApi.PresentConditionVO
     let flag = false
     data.childList.map(item => {
      if(roleList.value.includes(item.currentState)){
        message.error('目前状态不能为空')
        flag = true
      }
     })
     if(flag){
      return
     }
     data.submitFlag = type
     console.log('data',data)
     formLoading.value = true
     try {
       await PresentConditionApi.updatePresentCondition(data)
       message.success(t('common.updateSuccess'))
       goBack()
     } finally {
       formLoading.value = false
     }
   }

   /**返回 */
   const tagsViewStore = useTagsViewStore()
   const route = useRouter() // 路由
   const goBack = async () => {
     //获取当前路由并删除tagView
     tagsViewStore.delView(route.currentRoute.value)
     //跳转列表页
     route.push({
       path: '/produce/produce/workOrderManagement/presentCondition'
     })
   }
   // 获得id
   const { query } = useRoute() // 路由的查询
   const contentHeight = ref(0)
   onMounted(async () => {
     formLoading.value = true
     formType.value = query.type
     if (query.id) {
       formData.value = await PresentConditionApi.getPresentCondition(query.id)
     }
     contentHeight.value = document.body.clientHeight - 127
     formLoading.value = false
   })
</script>
<style scoped lang="scss">
   .contentView {
     padding: 10px;

     background: #fff;
     .orderTitle {
       width: 100%;
       line-height: 53px;
       position: relative;
       text-align: center;
       font-size: 30px;
       img {
         width: 232px;
         height: 53px;
         position: absolute;
         left: 0;
         top: 0;
       }
     }
   }
   .tableView {
     :deep(.el-input__wrapper) {
       box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
       cursor: default;
       .el-input__inner {
         cursor: default !important;
         text-align: left;
       }
     }
   }
   .orderView {
     border: 1px solid #000;
     font-size: 14px;
     border-color: #000;
     :deep(.el-input__wrapper) {
       box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
       cursor: default;
       .el-input__inner {
         cursor: default !important;
       }
     }
     .detailTitle {
       background: rgb(179, 255, 255);
       font-weight: bold;

       line-height: 30px;
       padding-left: 10px;
       border-bottom: 1px solid #000;
     }
     .detailItem {
       line-height: 30px;
       display: flex;
       align-items: center;
       border-bottom: 1px solid #000;
       .leftLabel {
         width: 110px;
         flex-shrink: 0;
         text-align: center;
         border-right: 1px solid #000;
         background: rgb(233, 251, 251);
       }
       .rightIpt {
         flex: 1;
         :deep(.is-focus) {
           border: none !important;
         }
       }
     }
     .detailItem + .detailItem {
       border-left: 1px solid #000;
     }
   }
</style>